<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="robots" content="index, follow" />
    <title>${field.typetitle}</title>
    <meta name="keywords" content="${field.typekeyword}" />
    <meta name="description" content="${field.typedescrip}" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="applicable-device" content="pc,mobile" />
    <link href="/{ms:global.style/}css/style.css" rel="stylesheet" />
    <!-- <link href="/{ms:global.style/}css/css.css" rel="stylesheet"/> -->
    <link href="/{ms:global.style/}css/cateringAndBar.css" rel="stylesheet" />
    <link href="/{ms:global.style/}css/common.css" rel="stylesheet" />
    <script src="/{ms:global.style/}js/jquery-1.8.3.min.js"></script>
    <script
      type="text/javascript"
      src="/{ms:global.style/}js/jquery.superslide.2.1.1.js"
    >
      //pc导航
    </script>
    <script src="/{ms:global.style/}js/anim.js">
      //动画
    </script>
    <script src="/{ms:global.style/}js/city.js">
      //省市区数据
    </script>
    <script
      type="text/javascript"
      src="/{ms:global.style/}js/basic.js"
    ></script>

    <!--引入vue库-->
    <script
      type="text/javascript"
      src="/static/plugins/vue/2.6.9/vue.min.js"
    ></script>
    <!--引入element-ui库-->
    <script src="/static/plugins/element-ui/2.15.8/index.min.js"></script>
    <link
      rel="stylesheet"
      href="/static/plugins/element-ui/2.15.8/theme-chalk/index.min.css"
    />
  </head>

  <body>
    <#include "header.htm" />
    <div class="o_big invest_o_big">
      {ms:channel type='self' typeid="1862319755021324290"}
      <img src="{@ms:file field.typelitpic/}" alt="故事在酒里" />
      <div class="desc">
        <h1>故事在酒里</h1>
      </div>
      {/ms:channel}
    </div>
    <!--正文begin-->
    <div class="wrap invest_wrap">
      <div class="invest_data_bg">
        <div class="invest_data">
          {ms:arclist order='asc'}
          <div class="item">
            <div class="value">
              ${field.shorttitle}<span>${field.descrip}</span>
            </div>
            <div class="label">${field.title}</div>
          </div>
          {/ms:arclist}
        </div>
      </div>
      <div class="catering_a_box">
        <div class="catering_a invest_a">
          {ms:channel type='self' typeid="1862319970629521410"}
          <div class="category_title2">
            <h2 class="text">${field.typetitle}</h2>
            <p class="f24">${field.typeshorttitle}</p>
          </div>
          {/ms:channel}
          <div class="invest_c process">
            {ms:arclist typeid="1862319970629521410" order='asc'}
            <div class="item">
              <img src="{@ms:file field.litpic/}" alt="故事在酒里" />
              <div class="item_c">
                <div class="index">0${field.index}</div>
                <div class="title">${field.title}</div>
              </div>
            </div>
            {/ms:arclist}
          </div>
        </div>
      </div>
      <div class="catering_a invest_a">
        <div class="category_title3">
          {ms:channel type='self' typeid="1862319755021324290"}
          <a class="title" href="{ms:global.html/}${field.typelink}">
            ${field.typetitle}
          </a>
          {/ms:channel}
          <div class="line"></div>
          {ms:channel type='self'}
          <div class="title title_active">${field.typetitle}</div>
          {/ms:channel}
        </div>
        <div class="invest_c">
          <div id="form" v-loading="loading" v-cloak>
            <el-form
              ref="form"
              :model="form"
              :rules="rules"
              label-position="top"
              hide-required-asterisk="true"
            >
              <el-row>
                <el-form-item label="联系方式 *" prop="phone">
                  <el-input v-model="form.phone"> </el-input>
                </el-form-item>
                <el-form-item label="联系人名称" prop="name">
                  <el-input v-model="form.name"> </el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="店铺名称" prop="shopName">
                  <el-input v-model="form.shopName"> </el-input>
                </el-form-item>
                <el-form-item label="经营类型 *" prop="type">
                  <el-input v-model="form.type"> </el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="所在城市 *" prop="city">
                  <el-cascader
                    ref="cascaderRef"
                    :options="areajson"
                    :props="{ value: 'label' }"
                    v-model="form.city"
                    filterable
                    placeholder=""
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="店铺地址 *" prop="addr">
                  <el-input v-model="form.addr"> </el-input>
                </el-form-item>
              </el-row>
              <el-row class="center">
                <el-button @click="submit" :loading="loading">
                  {{loading?'提交中':'确认提交'}}
                </el-button>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <!--正文end-->
    <#include "footer.htm" />
    <script language="javascript" src="/{ms:global.style/}js/foot.js"></script>
    <!--尾部end-->
  </body>

  <script>
    var form = new Vue({
      el: "#form",
      data: function () {
        return {
          loading: false,
          //表单数据
          form: {
            phone: "",
            name: "",
            shopName: "",
            type: "",
            city: "",
            addr: "",
          },
          rules: {
            phone: [
              {
                required: true,
                message: "联系电话不能为空",
              },
              {
                pattern:
                  /^([0-9]{3,4}-)?[0-9]{7,8}$|^\d{3,4}-\d{3,4}-\d{3,4}$|^1[0-9]{10}$/,
                message: "联系电话格式不匹配",
              },
            ],
            type: [{ required: true, message: "经营类型不能为空" }],
            city: [{ required: true, message: "所在城市不能为空" }],
            addr: [{ required: true, message: "店铺地址不能为空" }],
          },
        };
      },
      watch: {},
      components: {},
      computed: {},
      methods: {
        submit: function (e) {
          e.preventDefault(); //阻止默认事件跳转
          var that = this;
          that.$refs.form.validate(function (valid) {
            // if (valid) {
            //   that.form.modelName = "留言板"; //modelName需要填写自己的模型昵称
            //   ms.http
            //     .post("/mdiy/form/data/save.do", that.form)
            //     .then(function (res) {
            //       if (res.result) {
            //         that.$notify({
            //           title: "成功",
            //           type: "success",
            //           message: "感谢您的参与!",
            //         });
            //         that.$refs.form.resetFields(); //清空表单
            //       } else {
            //         if (res.msg == "验证码错误!") {
            //           that.$notify({
            //             title: "失败",
            //             message: res.msg,
            //             type: "warning",
            //           });
            //         } else {
            //           that.$alert(
            //             '需要安装留言插件才能使用，请先进入后台MStore安装留言插件使用。<a href="http://store.mingsoft.net/#/detail?id=310&type=plugin" style="color:#409EFF " target="_blank">查看留言插件</a>',
            //             "留言插件提示",
            //             {
            //               dangerouslyUseHTMLString: true,
            //             }
            //           );
            //         }
            //       }
            //     });
            // }
          });
        },
      },
    });
  </script>
</html>
